<template>
  <div class="shop">
    <img :src="shop.imgUrl" alt="" class="shop-logo">
    <div :class="{'shop-content':true,'shop-content-border-bottom':!hiddenBorder}">
      <div class="name">{{ shop.name }}</div>
      <div class="charge">
        <span>月售{{ shop.monthSales }}+</span>
        <span class="deliver-price">起送¥{{ shop.deliverCharge }}</span>
        <span>基础运费¥{{ shop.baseCharge }}</span>
      </div>
      <div class="discount">
        {{ shop.discount }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ShopInfo',
  props: ['shop', 'hiddenBorder']
}
</script>

<style lang="scss" scoped>

.shop {
  height: .80rem;
  display: flex;
  margin-bottom: .12rem;

  .shop-logo {
    width: .56rem;
    height: .56rem;
    margin-right: .16rem;
  }

  .shop-content {
    color: #333333;

    &-border-bottom {
      border-bottom: 1px solid #F1F1F1;
    }

    .name {
      font-size: .16rem;
    }

    .charge {
      font-size: .13rem;
      margin-bottom: .08rem;
      margin-top: .08rem;

      .deliver-price {
        margin: 0 .16rem;
      }
    }

    .discount {
      font-size: .13rem;
      color: #E93B3B;
    }
  }
}
</style>
